<!DOCTYPE html>

<html lang="en" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Expires" content="-1">
		<meta name="keywords" content="jquery,rating,raty,voto,star,staring,classificacao,classificar,votar,plugin" />
		<meta name="description" content="jQuery Raty - A Star Rating Plugin" />

		<title>jQuery Raty - A Star Rating Plugin</title>

		<!-- This CSS does not belong to the plugin. -->
		<link type="text/css" rel="stylesheet" href="doc/css/stylesheet.css"/>

		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="jquery.raty.min.js"></script>

		<script type="text/javascript">
			// This code does NOT belong the plugin. See the example code at the bottom of this page.
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-19499234-3']);
			_gaq.push(['_trackPageview']);
			
			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</head>
	<body>
		<div id="header">
			<div id="title">
				<a href="http://wbotelhos.com/raty">jQuery Raty - A Star Rating Plugin</a>
				<span id="version">(current version: 2.4.5)</span>
			</div>

			<div id="menu">
				<a href="http://github.com/downloads/wbotelhos/raty/jquery.raty-2.4.5.zip" target="_blank">Download</a> |
				<a href="http://github.com/wbotelhos/raty" target="_blank">Github</a> |
				<a href="http://www.wbotelhos.com/raty/changelog.md" target="_blank">Change Log</a> |
				<a href="http://www.wbotelhos.com/raty/README.md" target="_blank">Readme</a> |
				<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin" target="_blank">Article</a> |
				<a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">License</a> |
				<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin#comments" target="_blank" style="color: #2C8CBD;">Doubt</a> |
				<a href="http://www.wbotelhos.com/lab" target="_blank" style="color: #000;">yLab</a>
			</div>

			<a id="coffee" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=X8HEP2878NDEG&amp;item_name=jQuery%20Raty" target="_blank">buy me a coffee</a>

			<div class="description">jQuery <strong>Raty</strong> is a plugin that generates a customizable star rating.</div>
		</div>

		<div id="content">
			<div id="default-demo" class="session-first">Default options:</div>

			<div id="default"></div>

			<div class="source">
				$('#star').raty();<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div>

			<div id="fixed-demo" class="session">Started with a score and read only value:</div>
			<div id="fixed"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;readOnly : true,<br/>
				&#160;&#160;score&#160;&#160;&#160; : 2<br/>
				});<br/><br/>
				
				&lt;div id="star"&gt;&lt;/div&gt;
			</div>

			<div id="score-demo" class="session">Starting with a callback:</div>
			<div id="score" data-rating="3"></div>

			<div class="source">
			 	$('#score').raty({<br/>
				&#160;&#160;score: function() {<br/>
				&#160;&#160;&#160;&#160;return $(this).attr('data-rating');<br/>
				&#160;&#160;}<br/>
				});<br/><br/>

				&lt;div id="star" data-rating="3"&gt;&lt;/div&gt;
			</div>

			<div id="anyone-demo" class="session">A hint for no rated elements when it's read-only:</div>
			<div id="anyone"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;readOnly&#160;&#160; : true,<br/>
				&#160;&#160;noRatedMsg : 'anyone rated this product yet!'<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div>

			<div id="number-demo" class="session">Custom score name and a number of stars:</div>
			<div id="number"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;scoreName : 'entity.score',<br/>
				&#160;&#160;number&#160;&#160;&#160; : 10<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div>

			<div id="click-demo" class="session">Using click function:</div>
			<div id="click"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;click: function(score, evt) {<br/>
				&#160;&#160;&#160;&#160;alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);<br/>
				&#160;&#160;}<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				 - The argument score is the selected value;<br/>
				 - The argument evt is the click event;<br/>
				 - You can mension the star element (DOM) itself using 'this'.<br/>
			</span>

			<div id="cancel-demo" class="session">Default cancel button:</div>
			<div id="cancel"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;cancel: true<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				 - The score value for the click on cancel button is null.<br/>
			</span>

			<div id="cancel-custom-demo" class="session">Custom cancel button:</div>
			<div id="cancel-custom"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;cancel&#160;&#160;&#160;&#160;&#160; : true,<br/>
				&#160;&#160;cancelHint&#160; : 'remove my rating!',<br/>
				&#160;&#160;cancelPlace : 'right',<br/>
				&#160;&#160;click&#160;&#160;&#160;&#160;&#160;&#160; : function(score, evt) {<br/>
				&#160;&#160;&#160;&#160;alert('score: ' + score);<br/>
				&#160;&#160;}<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div>

			<div id="half-demo" class="session">Half star voting:</div>
			<div id="half"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;half&#160; : true,<br/>
				&#160;&#160;score : 3.3<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				- You can disable the 'halfShow' option to just vote with half star but not show it.<br/>
				- If 'halfShow' is disabled, then score &gt;= x.6 will be rounded up visually.<br/>
				- The interval can be:<br/>
				-- Rounded down: [x.00 .. x.25]<br/>
				-- Half star:&#160;&#160;&#160; [x.26 .. x.75]<br/>
				-- Rounded up:&#160;&#160; [x.76 .. x.99]
			</span>

			<div id="round-demo" class="session">Custom round option:</div>
			<div id="round"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;score : 1.26,<br/>
				&#160;&#160;round : { down: .25, full: .6, up: .76 }<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				- This example use the default round values;<br/>
				- down: with halfShow enabled, score &lt;= x.25 will be rounded down; (inclusive)<br/>
				- up: with halfShow enabled, score &gt;= x.76 will be rounded up; (inclusive)<br/>
				- down-up: with halfShow enabled, score &gt; x.25 and score &lt; .76 will be half star; (inclusive)<br/>
				- full: with halfShow disabled, score &gt;= x.6 will be rounded up; (inclusive)<br/>
			</span>

			<div id="icon-demo" class="session">Custom hint and icons:</div>
			<div id="icon"></div>

			<div class="source">
			 	$('#star').raty({<br/>
				&#160;&#160;hints&#160;&#160; : ['a', '', null, 'd', '5'],<br/>
				&#160;&#160;starOn&#160; : 'medal-on.png',<br/>
				&#160;&#160;starOff : 'medal-off.png'<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				- To display the number of the star, set null.
			</span>

			<div id="range-demo" class="session">Range of custom icons:</div>
			<div id="range"></div>

			<div class="source">
			 	$('#star').raty({<br/>
			 	&#160;&#160;iconRange: [<br/>
				&#160;&#160;&#160;&#160;{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },<br/>
				&#160;&#160;&#160;&#160;{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },<br/>
				&#160;&#160;&#160;&#160;{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },<br/>
				&#160;&#160;&#160;&#160;{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }<br/>
				&#160;&#160;]<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				- It's a array of objects where each one represents a custom icon;<br/>
				- The value range is until wich position the icon will be displayed;<br/>
				- The value on is the active icon;<br/>
				- The value off is the inactive icon;<br/>
				- The sequence of the range interval should be in a ascending order;<br/>
				- If the value on or off is omitted then the attribute starOn or starOff will be used.
			</span>

			<div id="big-demo" class="session">Bigger icon:</div>
			<div id="big"></div>

			<div class="source">
			 	$('#star').raty({<br/>
			 	&#160;&#160;cancel&#160;&#160;&#160; : true,<br/>
				&#160;&#160;cancelOff : 'cancel-off-big.png',<br/>
				&#160;&#160;cancelOn&#160; : 'cancel-on-big.png',<br/>
				&#160;&#160;half&#160;&#160;&#160;&#160;&#160; : true,<br/>
				&#160;&#160;size&#160;&#160;&#160;&#160;&#160; : 24,<br/>
				&#160;&#160;starHalf&#160; : 'star-half-big.png',<br/>
				&#160;&#160;starOff&#160;&#160; : 'star-off-big.png',<br/>
				&#160;&#160;starOn&#160;&#160;&#160; : 'star-on-big.png'<br/>
				});<br/><br/>
			   
				&lt;div id="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				- You can specify your own width as following: width: 120.
			</span>

			<div id="group-demo" class="session">Group of elements:</div>
			<div class="group"></div>
			<div class="group"></div>
			<div class="group"></div>

			<div class="source">
				$('.star').raty();<br/><br/>
	
				&lt;div class="star"&gt;&lt;/div&gt;<br/>
				&lt;div class="star"&gt;&lt;/div&gt;<br/>
				&lt;div class="star"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				- The ID is optional and must be unique;<br/>
				- If you don't pass a ID for the element, then it will be created.
			</span>

			<div id="target-demo" class="session">Displaying hint in a target element:</div>

			<div id="target"></div>
			<div id="hint"></div><br/>

			<div class="source">
				$('#star').raty({<br/>
				&#160;&#160;cancel&#160;&#160;&#160;&#160; : true,<br/>
				&#160;&#160;cancelHint : 'none',<br/>
				&#160;&#160;target&#160;&#160;&#160;&#160; : '#hint'<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;<br/>
				&lt;div id="target"&gt;&lt;/div&gt;
			</div>

			<div id="target-number-demo" class="session">Displaying and keeping the score in a target element:</div>

			<div id="target-number"></div>

			<select id="score-target">
				<option value="">--</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
			</select>

			<div class="source left">
				$('#star').raty({<br/>
				&#160;&#160;cancel&#160;&#160;&#160;&#160; : true,<br/>
				&#160;&#160;target&#160;&#160;&#160;&#160; : '#score',<br/>
				&#160;&#160;targetKeep : true,<br/>
				&#160;&#160;targetType : 'number'<br/>
				});<br/><br/>

				&lt;select id="target"&gt;<br/>
					&#160;&#160;&lt;option value=""&gt;0&lt;/option&gt;<br/>
					&#160;&#160;&lt;option value="1"&gt;1&lt;/option&gt;<br/>
					&#160;&#160;&lt;option value="2"&gt;2&lt;/option&gt;<br/>
					&#160;&#160;&lt;option value="3"&gt;3&lt;/option&gt;<br/>
					&#160;&#160;&lt;option value="4"&gt;4&lt;/option&gt;<br/>
					&#160;&#160;&lt;option value="5"&gt;5&lt;/option&gt;<br/>
				&lt;/select&gt;<br/>
			</div><br/>

			<span class="comment">
				- You can to choose the target types 'hint' or 'number'.
			</span>

			<div id="target-out-demo" class="session">Setting default value to the target on mouseout:</div>

			<div id="target-out"></div>
			<div id="hint-out"></div><br/>

			<div class="source">
				$('#star').raty({<br/>
				&#160;&#160;target&#160;&#160;&#160;&#160; : '#hint',<br/>
				&#160;&#160;targetText : '--'<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;<br/>
				&lt;div id="target"&gt;&lt;/div&gt;
			</div>

			<div id="format-demo" class="session">Displaying hint with format template:</div>

			<div id="format"></div>
			<div id="hint-format"></div><br/>

			<div class="source">
				$('#star').raty({<br/>
				&#160;&#160;cancel&#160;&#160;&#160;&#160;&#160;&#160; : true,<br/>
				&#160;&#160;cancelHint&#160;&#160; : 'Sure?',<br/>
				&#160;&#160;target&#160;&#160;&#160;&#160;&#160;&#160; : '#hint',<br/>
				&#160;&#160;targetFormat : 'your score: {score}',<br/>
				&#160;&#160;targetText&#160;&#160; : 'none',<br/>
				&#160;&#160;targetKeep&#160;&#160; : true<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;<br/>
				&lt;div id="target"&gt;&lt;/div&gt;
			</div>

			<div id="mouseover-demo" class="session">Using mouseover callback:</div>

			<div id="mouseover"></div>
			<div id="mouseover-target"></div><br/>

			<div class="source" style="margin-top: 15px;">
				$('#star').raty({<br/>
				&#160;&#160;cancel&#160;&#160;&#160; : true,<br />
				&#160;&#160;mouseover : function(score, evt) {<br />
				&#160;&#160;&#160;&#160;var target = $('#mouseover-target');<br /><br />

				&#160;&#160;&#160;&#160;if (score === null) {<br />
				&#160;&#160;&#160;&#160;&#160;&#160;target.html('Boring!');<br />
				&#160;&#160;&#160;&#160;} else if (score === undefined) {<br />
				&#160;&#160;&#160;&#160;&#160;&#160;target.empty();<br />
				&#160;&#160;&#160;&#160;} else {<br />
				&#160;&#160;&#160;&#160;&#160;&#160;target.html('score: ' + score);<br />
				&#160;&#160;&#160;&#160;}<br />
				&#160;&#160;}<br />
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;<br/>
				&lt;div id="target"&gt;&lt;/div&gt;
			</div>

			<span class="comment">
				- The options target, targetFormat, targetKeep, targetText and targetType are abstractions of this callback.
			</span>

			<div id="precision-demo" class="session">Half star voting precision:</div>

			<div id="precision"></div>
			<div id="precision-target"></div><br/>

			<div class="source" style="margin-top: 15px;">
				$('#star').raty({<br/>
				&#160;&#160;half&#160;&#160;&#160;&#160;&#160;&#160; : true,<br/>
				&#160;&#160;precision&#160; : true,<br/>
				&#160;&#160;size&#160;&#160;&#160;&#160;&#160;&#160; : 24,<br/>
				&#160;&#160;starHalf&#160;&#160; : 'star-half-big.png',<br/>
				&#160;&#160;starOff&#160;&#160;&#160; : 'star-off-big.png',<br/>
				&#160;&#160;starOn&#160;&#160;&#160;&#160; : 'star-on-big.png'<br/>
				&#160;&#160;target&#160;&#160;&#160;&#160; : '#precision-target'<br/>
				&#160;&#160;targetType : 'number'<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;<br/>
				&lt;div id="target"&gt;&lt;/div&gt;
			</div>

			<div id="space-demo" class="session">Without space between stars:</div>

			<div id="space"></div>

			<div class="source">
				$('#star').raty({<br/>
				&#160;&#160;space: false<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;<br/>
			</div>

			<div id="single-demo" class="session">Single icon:</div>

			<div id="single"></div>

			<div class="source">
				$('#star').raty({<br/>
				&#160;&#160;single: true<br/>
				});<br/><br/>

				&lt;div id="star"&gt;&lt;/div&gt;<br/>
			</div>

			<div id="action-demo" class="session">Directed actions with public functions:</div>

			love:
			<div class="action"></div>

			happy:
			<div class="action"></div><br/>

			your last rate:
			<div id="result"></div>

			<div class="source">
				$('.star').raty({<br/>
				&#160;&#160;half&#160; : true,<br/>
				&#160;&#160;click : function(score, evt) {<br/>
				&#160;&#160;&#160;&#160;$(this).raty('cancel');<br/>
				&#160;&#160;&#160;&#160;$('#result').raty('score', score);<br/>
				&#160;&#160;}<br/>
				});<br/><br/>

				&lt;div class="star"&gt;&lt;/div&gt;<br/>
				&lt;div class="star"&gt;&lt;/div&gt;<br/><br/>
				&lt;div id="result"&gt;&lt;/div&gt;
			</div><br/>

			<span class="comment">
				- All functions have a optional second parameter to specify which container will be executed;<br/>
				- You can pass a ID or a class to be the target of the action;<br/>
				- If the ID or class are not specified, then the last element Raty will be takes.
			</span>

			<div id="function-demo" class="session">Functions Demo:</div>

			<div id="function"></div>
			<div id="hint-function"></div><br/>

			<div style="color: #CCC; margin-top: 15px;">
				<a href="javascript:void(0);" title="1" class="score">Score 1</a> |
				<a href="javascript:void(0);" title="2" class="score">Score 2</a> |
				<a href="javascript:void(0);" title="3" class="score">Score 3</a> |
				<a href="javascript:void(0);" title="4" class="score">Score 4</a> |
				<a href="javascript:void(0);" title="5" class="score">Score 5</a>
			</div>

			<div style="color: #CCC; margin-top: 15px;">
				<a href="javascript:void(0);" title="1" class="click">Click 1</a> |
				<a href="javascript:void(0);" title="2" class="click">Click 2</a> |
				<a href="javascript:void(0);" title="3" class="click">Click 3</a> |
				<a href="javascript:void(0);" title="4" class="click">Click 4</a> |
				<a href="javascript:void(0);" title="5" class="click">Click 5</a>
			</div>

			<div style="color: #CCC; margin-top: 15px;">
				<a href="javascript:void(0);" title="true" class="readOnly">ReadOnly (true)</a> |
				<a href="javascript:void(0);" title="false" class="readOnly">ReadOnly (false)</a>
			</div>

			<div style="color: #CCC; margin-top: 15px;">
				<a href="javascript:void(0);" title="false" class="cancel">Cancel</a> |
				<a href="javascript:void(0);" title="true" class="cancel">Cancel (trigger)</a>
			</div>

			<div style="color: #CCC; margin-top: 15px;">
				<a id="reload" href="javascript:void(0);" title="reload">Reload</a> |
				<a id="get-score" href="javascript:void(0);" title="score">Score</a>
			</div>

			<div class="action-wrapper">
				settings: <input id="set-id" type="text" value="{ number: 3 }" class="action-field" />
				<a id="set-action" href="javascript:void(0);" title="set" class="action-link">set</a>
			</div>

			<div id="global-demo" class="session">Changing the settings globally:</div>

			<div class="source">
				$.fn.raty.defaults.starOn = 'star-on.gif';<br/>
				$.fn.raty.defaults.starOff = 'star-off.gif';
			</div>

			<span class="comment">
				- You can change any option mention the scope <b>$.fn.raty.defaults.</b> + <i>option_name</i>;<br/>
				- This setup must be called before you bind the Raty, of course.
			</span>

			<div class="session">Default options:</div>

			<div class="session-option">cancel: <span>false</span></div>
			<div class="comment">If will be showed a button to cancel the rating.</div>

			<hr />

			<div class="session-option">cancelHint: <span>'cancel this rating!'</span></div>
			<div class="comment">The hint information.</div>

			<hr />

		 	<div class="session-option">cancelHint: 'cancel this rating!'<br/>
		 	<div class="comment">The hint information.</div>

			<hr />

		 	<div class="session-option">cancelOff: <span>'cancel-off.png'</span></div>
		 	<div class="comment">Name of the cancel image off.</div>

			<hr />

		 	<div class="session-option">cancelOn: <span>'cancel-on.png'</span></div>
		 	<div class="comment">Name of the cancel image on.</div>

			<hr />

		 	<div class="session-option">cancelPlace: <span>'left'</span></div>
		 	<div class="comment">Position of the cancel button.</div>

			<hr />

			<div class="session-option">click: <span>undefined</span></div>
		 	<div class="comment">Function that returns the selected value.</div>

			<hr />

			<div class="session-option">half: <span>false</span></div>
		 	<div class="comment">Enables half star selection.</div>

			<hr />

			<div class="session-option">halfShow: <span>true</span></div>
		 	<div class="comment">Enables half star display.</div>

			<hr />

		 	<div class="session-option">hints: <span>['bad', 'poor', 'regular', 'good', 'gorgeous']</span></div>
		 	<div class="comment">List of names that will be used as a hint on each star.</div>

			<hr />

			<div class="session-option">iconRange: <span>undefined</span></div>
			<div class="comment">List of object that represent each icon with position and names.</div>

			<hr />

			<div class="session-option">noRatedMsg: <span>'not rated yet'</span></div>
		 	<div class="comment">A hint for no rated elements when it's read-only.</div>

			<hr />

			<div class="session-option">number: <span>5</span></div>
		 	<div class="comment">Number of stars that will be presented.</div>

			<hr />

			<div class="session-option">path: <span>'img/'</span></div>
		 	<div class="comment">A range of custom icons that you can set.</div>

			<hr />

			<div class="session-option">precision: <span>false</span></div>
		 	<div class="comment">Enables the selection of a precision score.</div>

			<hr />

			<div class="session-option">readOnly: <span>false</span></div>
		 	<div class="comment">If the stars will be read-only.</div>

			<hr />

			<div class="session-option">round: <span>{ down: <span>.25, full: <span>.6, up: <span>.76 }</span></div>
		 	<div class="comment">Configuration to set the round rules.</div>

			<hr />

			<div class="session-option">score: <span>undefined</span></div>
			<div class="comment">Number of stars to be selected.</div>

			<hr />

			<div class="session-option">scoreName: <span>'score'</span></div>
		 	<div class="comment">Name of the hidden field that holds the score value.</div>

			<hr />

			<div class="session-option">single: <span>false</span></div>
		 	<div class="comment">Enables the single star selection.</div>

			<hr />

			<div class="session-option">space: <span>true</span></div>
		 	<div class="comment">Puts space between the stars.</div>

			<hr />

			<div class="session-option">size: <span>16</span></div>
		 	<div class="comment">The icons size.</div>

			<hr />

			<div class="session-option">starHalf: <span>'star-half.png'</span></div>
		 	<div class="comment">The name of the half star image.</div>

			<hr />

			<div class="session-option">starOff: <span>'star-off.png'</span></div>
		 	<div class="comment">Name of the star image off.</div>

			<hr />

			<div class="session-option">starOn: <span>'star-on.png'</span></div>
		 	<div class="comment">Name of the star image on.</div>

			<hr />

			<div class="session-option">target: <span>undefined</span></div>
			<div class="comment">Element selector where the rating will be displayed.</div>

			<hr />

			<div class="session-option">targetFormat: <span>'{score}'</span></div>
			<div class="comment">Template to interpolate the score with some thing.</div>

			<hr />

			<div class="session-option">targetKeep: <span>false</span></div>
			<div class="comment">If the last choose value will be keeped on mouseout.</div>

			<hr />

			<div class="session-option">targetText: <span>''</span></div>
			<div class="comment">Default value when there is no score or targetKeep is off.</div>

			<hr />

			<div class="session-option">targetType: <span>'hint'</span></div>
			<div class="comment">What display on target element hint or number.</div>

			<hr />

			<div class="session-option">width&#160;: <span>undefined</span></div>
			<div class="comment">The container width of the stars.</div>

			<div class="session">Functions:</div>

			<div class="source">$('#star').raty('score');</div>
			<div class="comment">Recovers the current score or undefined for no rated. Class returns an array of score</div>

			<div class="source">$('#star').raty('score', 3);</div>
			<div class="comment">Set the score with 3 stars.</div>

			<div class="source">$('#star').raty('click', 2);</div>
			<div class="comment">Click on the second star of the Raty with ID called 'raty'.</div>

			<div class="source">$('.star').raty('readOnly', true);</div>
			<div class="comment">Adjusts all Raty with class called 'raty' for read-only.</div>

			<div class="source">$('#star').raty('cancel', true);</div>
			<div class="comment">Cancel the rating. The second optional parameter enable thes click callback.</div>

			<div class="source">$('#star').raty('reload');</div>
			<div class="comment">Reload the rating with the current configuration.</div>

			<div class="source">$('#star').raty('set', { number: 10 });</div>
			<div class="comment">Reload the rating applying new configurations.</div>
		</div>

		<div id="footer">
			<div id="copy">&copy; 2010 <a href="http://www.wbotelhos.com/" target="_blank">wbotelhos.com</a></div>
		</div>

		<script type="text/javascript">
			$(function() {

				$('#default').raty();

				$('#fixed').raty({
					readOnly	: true,
					score		: 2
				});

				$('#score').raty({
				    score: function() {
				        return $(this).attr('data-rating');
				    }
				});

				$('#anyone').raty({
					readOnly	: true,
					noRatedMsg	: 'anyone rated this product yet!'
				});

				$('#number').raty({
					scoreName	: 'entity.score',
					number		: 10
				});

				$('#click').raty({
					click: function(score, evt) {
						alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);
					}
				});

				$('#cancel').raty({
					cancel: true
				});

				$('#cancel-custom').raty({
					cancel		: true,
					cancelHint	: 'remove my rating!',
					cancelPlace	: 'right',
					click		: function(score, evt) {
						alert('score: ' + score);
					}
				});

				$('#half').raty({
					half	: true,
					score	: 3.3
				});

				$('#round').raty({
					score	: 1.26,
					round	: { down: .25, full: .6, up: .76 }
				});

				$('#icon').raty({
					hints		: ['a', '', null, 'd', '5'],
					path		: 'doc/img/',
				   	starOn		: 'medal-on.png',
				   	starOff		: 'medal-off.png'
				});

				$('#range').raty({
					iconRange	: [
						{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },
						{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },
						{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },
						{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }
					],
					path		: 'doc/img/'
				});

				$('#big').raty({
					cancel		: true,
					cancelOff	: 'cancel-off-big.png',
					cancelOn	: 'cancel-on-big.png',
					half		: true,
					path		: 'doc/img/',
					size		: 24,
					starOff		: 'star-off-big.png',
					starOn		: 'star-on-big.png',
					starHalf	: 'star-half-big.png'
				});

				$('.group').raty();

				$('#target').raty({
					cancel		: true,
					cancelHint	: 'none',
					target		: '#hint'
				});

				$('#format').raty({
					cancel			: true,
					cancelHint		: 'Sure?',
					target			: '#hint-format',
					targetFormat	: 'your score: {score}',
					targetKeep		: true,
					targetText		: 'none'
				});

				$('#target-number').raty({
					cancel		: true,
					target		: '#score-target',
					targetKeep	: true,
					targetType	: 'number'
				});

				$('#target-out').raty({
					target		: '#hint-out',
					targetText	: '--'
				});

				$('#mouseover').raty({
  					cancel		: true,
  					mouseover	: function(score, evt) {
  						var target = $('#mouseover-target');

  						if (score === null) {
  							target.html('Boring!');
  						} else if (score === undefined) {
  							target.empty();
  						} else {
  							target.html('score: ' + score);
  						}
  					}
  				});

				$('#precision').raty({
					half		: true,
					path		: 'doc/img/',
					precision	: true,
					size		: 24,
					starOff		: 'star-off-big.png',
					starOn		: 'star-on-big.png',
					starHalf	: 'star-half-big.png',
					target		: '#precision-target',
					targetType	: 'number'
				});

				$('#space').raty({
					space: false
				});

				$('#single').raty({
					single: true
				});

				var $result = $('#result').raty();

				$('.action').raty({
					click: function(score, evt) {
						$(this).raty('cancel');
						$result.raty('score', score);
					}
				});

				$('#function').raty({
					cancel		: true,
					cancelHint	: 'Boring!',
					click		: function(score, evt) {
						$(this).fadeOut(function() { $(this).fadeIn(); });
					},
					targetKeep	: true,
					score		: 2,
					target		: '#hint-function',
					targetText	: '--'
				});

				$('.score').click(function() {
					$('#function').raty('score', this.title);
				});

				$('.click').click(function() {
					$('#function').raty('click', this.title);
				});

				$('.readOnly').click(function() {
					$('#function').raty('readOnly', (this.title == 'true') ? true : false);
				});

				$('.cancel').click(function() {
					$('#function').raty('cancel', (this.title == 'true') ? true : false);
				});

				$('#reload').click(function() {
					$('#function').raty('reload');
				});

				$('#get-score').click(function() {
					alert($('#function').raty('score'));
				});

				$('#set-action').on('click', function() {
					var options = $('#set-id').val();

					eval("$('#function').raty('set', " + options + ");");
				});

			});
		</script>
	</body>
</html>
